<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .round{
            width: 0;
            height: 0;
            border: 8px solid black;
            border-radius: 100%;
        }
        .two,
        .three,
        .four,
        .five,
        .six,
        .seven,
        .eight,
        .nine{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5%;
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            align-items: center;
            justify-content: space-around;
        }
        .t1{
            width: 70px;
        }
        .t2{
        width: 70px;
        display: flex;
        justify-content: right;
        }
        .f1{
            width: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
           
        }
        .f2{
            width: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .fi1,.fi2{
            width: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .s1,.s2,.s3{
            width: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .se1,.se2{
            width: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .e1,.e3{
            width: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .e2{
            width: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center; 
        }
        .n1,.n2,.n3{
            width: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- 一个点 -->
     <div class="one">
        <div class="round"></div>
     </div>
    <!-- 两个点 -->
      <div class="two">
        <div class="round"></div>
        <div class="round"></div>
      </div>
    <!-- 三个点 -->
       <div class="three">
        <div class="t1">
            <div class="round"></div>
        </div>
            <div class="round"></div>
            <div class="t2">
                <div class="round"></div>
            </div>
       </div>
    <!-- 四个点 -->
        <div class="four">
            <div class="f1">
                <div class="round"></div>
                <div class="round"></div>
            </div>
            <div class="f2">
                <div class="round"></div>
                <div class="round"></div>
            </div>
            </div>
    <!-- 五个点 -->
        <div class="five">
            <div class="fi1">
                    <div class="round"></div>
                    <div class="round"></div>
                </div>
                <div class="round"></div>
                <div class="fi2">
                    <div class="round"></div>
                    <div class="round"></div>
                </div>
            </div>
        </div>
    <!-- 六个点     -->
     <div class="six">
        <div class="s1">
            <div class="round"></div>
            <div class="round"></div>
        </div>
        <div class="s2">
            <div class="round"></div>
            <div class="round"></div>
        </div>
        <div class="s3">
            <div class="round"></div>
            <div class="round"></div>
        </div>
     </div>
     <!-- 七个点 -->
      <div class="seven">
        <div class="se1">
            <div class="round"></div>
            <div class="round"></div>
            <div class="round"></div>
        </div>
        <div class="round"></div>
        <div class="se2">
            <div class="round"></div>
            <div class="round"></div>
            <div class="round"></div>
        </div>
      </div>
      <!-- 八个点 -->
       <div class="eight">
        <div class="e1">
            <div class="round"></div>
            <div class="round"></div>
            <div class="round"></div>
        </div>
        <div class="e2">
            <div class="round"></div>
            <div class="round"></div>
        </div>
        <div class="e3">
            <div class="round"></div>
            <div class="round"></div>
            <div class="round"></div>
        </div>
       </div>
       <!-- 九个点 -->
        <div class="nine">
            <div class="n1">
                <div class="round"></div>
                <div class="round"></div>
                <div class="round"></div>
            </div>
            <div class="n2">
                <div class="round"></div>
                <div class="round"></div>
                <div class="round"></div>
            </div>
            <div class="n3">
                <div class="round"></div>
                <div class="round"></div>
                <div class="round"></div>
            </div>
        </div>
</body>
</html>